<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../../hy/common.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>车间信息</title>
<style type="text/css">
	table tr td {
		height: 50px;
	}
</style>
<script type="text/javascript">
	$(function() {
		 //时间控件	
	    $(".form_datetime").datetimepicker({
	   	 startDate: new Date(),
		 format: "yyyy-mm-dd",
		 autoclose: true,
		 todayBtn: true,
		 todayHighlight: true,
		 showMeridian: true,
		 pickerPosition: "bottom-left",
		 language: 'zh-CN',//中文，需要引用zh-CN.js包
		 initialDate:new Date(),
		 startView: 2,//月视图
		 minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
		 });
		 
	    $("#createTime").datetimepicker("setDate", new Date());
		 
		 //初始化时间
		 
        //新增一行
	    let $table = $('#table');
	    let $button = $('#button');
	    let $getTableData = $('#getTableData');

	    $button.click(function() {
	        $table.bootstrapTable('insertRow', {
	            index: 0,
	            row: {
	            	remark: '',
	            	item: '',
	            	money: ''
	            }
	        });
	    });
	    

	    //表格设置
	    $table.bootstrapTable({
	        url: '${pageContext.request.contextPath }/datas/data2.json',
	        clickEdit: true,
	        striped : true, //是否显示行间隔色
	        columns: [{
	            field: 'remark',
	            title: '摘要'
	        }, {
	            field: 'item',
	            title: '科目',
	            width : '30%',
	            formatter: function (value, row, index) {
	            	var option;
	            	//立案号下拉框
	            	$.ajax({
	            	    url: '${pageContext.request.contextPath }/report/selectItem.do',
	                    type:"POST",
                        dataType:'json',
	                    async : false,
	                    success:function(data){
	                    	var op = "<option value =''>请选择</option>";
	                    	for(var i = 0; i <data.length; i++ ) {
	    		        	 	  op = op + "<option value='"+data[i].value+"'>"+data[i].text+"</option>"
	    		        	   }
	                		option = '<select class="form-control" id="item"'+index+' name="item" style="height:33px;">'+op+'</select>';
	                    }
	                })
	                return option;
	            }
	        /* //formatter: setSelect
				editable: {
		          type: 'select',
		          title: '科目',
		          emptytext: "请选择",
		         source:[{value:"1",text:"白班"},{value:"2",text:"夜班"}]
		           source:
		          function () {
	                    var result1 ;
	                    $.ajax({
	                        url:'${pageContext.request.contextPath }/report/selectItem.do',
	                        type:"POST",
	                        dataType:'json',
	                        success:function (result) {
	                        	result1 = result;
	                        }
	                    }); 
	                    return result1;
	                },  
	           	}   */
	        }, {
	            field: 'money',
	            title: '金额'
	        }, ],
	        /**
	         * @param {点击列的 field 名称} field
	         * @param {点击列的 value 值} value
	         * @param {点击列的整行数据} row
	         * @param {td 元素} $element
	         */
	        onClickCell: function(field, value, row, $element) {
	        	if(field == "item") {
	        		return;
	        	}
	            $element.attr('contenteditable', true);
	            $element.blur(function() {
	                let index = $element.parent().data('index');
	                let tdValue = $element.html();

	                saveData(index, field, tdValue);
	            })
	        }
	    });

	    $getTableData.click(function() {
	        alert(JSON.stringify($table.bootstrapTable('getData')));
	    });
	    
	    /*  $(".form-control").change(function() {
    	 var indexSelected = $(this).parent().parent()[0].rowIndex - 1;
    	 var valueSelected = $(this).children('option:selected').val();
    	 $('#table').bootstrapTable('updateCell', {
    	  index: indexSelected,
    	  field: 'item',
    	  value: valueSelected
    	 })
    	});
	    
	    function setSelect(value, row, index){
			var strHtml = "<select class='form-control'>"
			var op = ""
			   $.ajax({
		           url:'${pageContext.request.contextPath }/report/selectItem.do',
		           type:"POST",
		           dataType:'json',
		           async:false, 
		           success:function (result) {
		        	   for(var i = 0; i <result.length; i++ ) {
		        	 	  op = op + "<option value='"+result[i].value+"'>"+result[i].text+"</option>"
		        	   }
		           } 
		       }); 
			var ending = "</select>";
			strHtml = strHtml+op+ending; 
		   return strHtml;
		} */

	    function saveData(index, field, value) {
	        $table.bootstrapTable('updateCell', {
	            index: index,       //行索引
	            field: field,       //列名
	            value: value        //cell值
	        })
	    }

	});
	
	toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上 
</script>
</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">新增费用信息</div>
     <div class="panel-body">
    	<form class="form-inline" role="form" id="addForm" method="post">
		    <div class="table-box" style="margin: 20px;">
			        <button id="button" class="btn btn-default">新增</button>
			        <button id="getTableData" class="btn btn-default">getTableData</button>
			        
			        <div class="form-group" style="float: right;">
			         	<label class="control-label">时间:</label>
				  		<input class="form_datetime form-control" type="text" id="createTime" name="createTime" readonly style="width: 130px; margin-right: 3px;" >
			  		</div>
			  		
			   		<table id="table"></table>
			</div>
		</form>
	</div>

 <!--    <div class="panel-body">
    	<form class="form-horizontal" role="form" id="addForm" method="post">
		  <label for="phone" class="control-label">时间:</label>
		  <input class="form_datetime form-control" type="text" id="createTime" name="createTime" readonly style="width: 15%" >
		<br/>
		<div class="t1">
			 <table class="table table-bordered">
			 	<tr>
			        <th>摘要</th>
			        <th>科目 </th>
			        <th>金额</th>
			 	</tr>
		        <tr>
		        	<td>产品 A</td>
		        	<td>产品 A</td>
		        	<td>200</td>
		        </tr>
		        <tr>
		        	<td>产品 B</td>
		        	<td>产品 B</td>
		        	<td>400</td>
		        </tr>
		        <tr>
		        	<td>产品 B</td>
		        	<td>产品 B</td>
		        	<td>400</td>
		        </tr>
		        <tr>
		        	<td>产品 B</td>
		        	<td>产品 B</td>
		        	<td>400</td>
		        </tr>
	    	</table>
    	</div> -->
    	<br/>
		<div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal"  onclick="resets()">关闭</button>
			<button type="submit" class="btn btn-primary" onclick="save()">保存</button>
		</div>
	</form>
    </div>
</div>
	
	
<script type="text/javascript">
	$(function() {
		var layerTips = parent.layer === undefined ? layui.layer : parent.layer
		$("#addForm").bootstrapValidator({
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				name : {
					validators : {
						notEmpty : {
							message : '车间名称不能为空'
						},
					}
				},
			},
		});
		$("#editForm").bootstrapValidator({
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				name : {
					validators : {
						notEmpty : {
							message : '车间名称不能为空'
						},
					}
				},
			},
		});
	});
	</script>
</body>
</html>